import { DICT_TYPE, getIntDictOptions } from "@/utils/dict";
import { Col, Form, Input, Modal, Row, Radio, Spin, Select, InputNumber } from "antd";
import React, { useState, useEffect, useImperativeHandle, } from "react";
import { dictDataApi } from "@/api";
const { TextArea } = Input;
/**@description 字典详情新建表单 */
const DictDataForm = ({ onRef, getList = Function }) => {
    const [show, setShow] = useState(false);
    const [loading, setLoading] = useState(false);
    const [form] = Form.useForm();

    /**@description 表单布局 */
    const formItemLayout = {
        labelCol: {
            xs: {
                span: 24,
            },
            sm: {
                span: 4,
            },
        },
        wrapperCol: {
            xs: {
                span: 24,
            },
            sm: {
                span: 20,
            },
        },
    };

    /**@description 取消 */
    const onCanle = () => {
        setShow(false);
    }

    /**@description 添加|修改操作 */
    const open = async ({
        actionType = String || undefined,
        record = {},

    }) => {
        setShow(true);
        form.resetFields();
        const { dictType = null, id = null, label, value, sort, colorType, remark, cssClass } = record;
        if (actionType === "add") {
            form.setFieldsValue({ dictType })
        } else {

            try {
                setLoading(true);

                const data = await dictDataApi.getDictDetail(id);
                console.log("请求回来的数据：", data)
                // const { label, value, sort, colorType, remark, cssClass } = data;
                form.setFieldsValue({
                    ...data
                })
            } catch (error) {
                console.log("错在哪里？", error)
            } finally {
                setLoading(false);
            }
        }

    }

    /**@description 异步保存数据 */
    const save = async (value) => {
        const data = await dictDataApi.createDictData(value);
        getList();
        onCanle();
    }

    /**@description 校验表单 */
    const validateForm = async () => {
        form.validateFields().then(res => {
            console.log("校验参数：", res)
            save(res)
        })
    }

    /**@description 向外暴露方法 */
    useImperativeHandle(onRef, () => ({
        open
    }))

    /**@description form表单props配置 */
    const formProps = {
        form,
    }

    useEffect(() => {
        return () => {
            form.resetFields();
        }
    }, [])


    return (
        <>
            <Modal
                title="编辑"
                width={550}
                open={show}
                centered={true}
                destroyOnClose={true}
                onCancel={onCanle}
                onOk={validateForm}
            >
                <Spin spinning={loading}>
                    <Form
                        {...formItemLayout}
                        {...formProps}
                    >
                        <Row gutter={24}>
                            <Col span={24} style={{ display: "none" }}>
                                <Form.Item label="id" name="id">
                                    <Input disabled />
                                </Form.Item>
                            </Col>
                            <Col span={24}>
                                <Form.Item label="字典类型" name="dictType">
                                    <Input placeholder="请输入字典类型" disabled />
                                </Form.Item>
                            </Col>
                            <Col span={24}>
                                <Form.Item required label="数据标签" name="label">
                                    <Input placeholder="请输入数据标签名称" />
                                </Form.Item>
                            </Col>
                            <Col span={24}>
                                <Form.Item required label="数据键值" name="value">
                                    <Input placeholder="请输入数据键值" />
                                </Form.Item>
                            </Col>
                            <Col span={24}>
                                <Form.Item label="显示排序" name="sort">
                                    <InputNumber />
                                </Form.Item>
                            </Col>
                            <Col span={24}>
                                <Form.Item label="颜色类型" name="colorType">
                                    <Select placeholder="请选择颜色分类"
                                        options={getIntDictOptions(DICT_TYPE.SYSTEM_DICT_COLORTYPE)}
                                    />
                                </Form.Item>
                            </Col>
                            <Col span={24}>
                                <Form.Item label="CSS Class" name="cssClass">
                                    <Input placeholder="请输入CSS Class" />
                                </Form.Item>
                            </Col>
                            <Col span={24}>
                                <Form.Item label="备注" name="remark">
                                    <TextArea />
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>
                </Spin>

            </Modal>
        </>
    )
}
export default DictDataForm;